<template>
    <!-- 导航 -->
    <el-breadcrumb class="navigation" separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备类型设置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="headDivider"></div>
    <div class="flex">
        <!--  搜索栏 -->
        <div>
            <el-form style="margin-top: 15px;" :inline="true" :model="queryType" class="demo-form-inline">
                <el-form-item label="类型名称">
                    <el-input v-model="queryType.teamCode" placeholder="类型名称" clearable />
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-select v-model="queryType.teamTypeId" placeholder="选择是或否">
                        <el-option v-for="item in types" :key="item.teamTypeId" :label="item.teamTypeName"
                            :value="item.teamTypeId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadTeams">搜索</el-button>
                    <el-button @click="resetTing">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 工具栏 -->
        <div>
            <el-button title="新增班组" @click="this.addTeamDialogVisible = true" type="primary"><el-icon>
                    <Plus />
                </el-icon></el-button>
        </div>
    </div>

    <!-- 设备类型树 -->
    <el-table ref="typeTable" :data="types" style="width: 100%; margin-bottom: 20px" row-key="machineTypeId">
        <el-table-column prop="machineTypeCode" label="设备类型编码" />
        <el-table-column prop="machineTypeName" label="设备类型名称" />
        <el-table-column prop="enableFlag" label="是否启用">
            <template #default="scope">
                <el-tag v-if="scope.row.enableFlag == 'y'" class="ml-2" type="success">启用</el-tag>
                <el-tag v-else class="ml-2" type="danger">禁用</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column width="330" align="center" label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleTeamEdit(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="deleteTeamEdits(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import machineryTypeRequest from '../../../api/dv-machineryType.js';
export default {
    data() {
        return {
            //加载数据
            types: [],
            defaultProps: {
                children: 'children',// 孩子节点集合的属性名
                label: 'machineTypeName',// 对应的文本的属性名
            },
            // 搜索栏
            queryType: {},
        }
    }, methods: {
        //查询所有数据
        loadTypes() {
            machineryTypeRequest.list(res => {
                this.types = res.data;
            })
        },
    }, mounted() {
        this.loadTypes();
    }
}
</script>
<style>
.headDivider {
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
    background-color: #dcdfe6;
    position: relative;
}
</style>